<template>
    <div>
        <h1>Vue的基本语法</h1>
        <ul>
            <li>Vue是一个单页面应用程序，Vue的页面都是单文件组件</li>
            <li>Vue单文件组件由三部分组成：template script style</li>
            <li>Vue语法：html模板语法（插值语法：{{  }}+指令）</li>
            <li>num:{{ num }}</li>
        </ul>

        <P>{{ arr }}</P>

        <p v-for="(item,index) in arr" :key="index">
            {{ index }}---{{ item }}
        </p>

         <p v-for="(item,key) in obj" :key="key">
                    {{ item }}
        </p>

        <input type="button" value="修改num的值" v-on:click="fn" class="btn btn-primary">
        <input type="button" value="修改num的值" @click="fn" class="btn btn-primary">
        <input type="button" value="修改arr的值" @click="fn1" class="btn btn-primary">
        
    </div>
</template>

<script setup lang="ts">
    //Vue最大的特点：就数据驱动视图
    //Vue中声明的数据应该是响应式数据:数据变了视图要自动更新
    //ref :主要声明基本响应式数据 数值 布尔类型 字符串
    //reactive :主要用于复杂类型数据：数组和对象
    import{ref,reactive}from 'vue'

    let num=ref(100);

    let arr=reactive([10,20,30,40,50,60,70,80,90]);

    let obj=reactive({
        name:"张三",
        age:"20"
    })

    const fn=()=>{
        num.value++;
    }
    const fn1=()=>{
        obj.name="李四";
        obj.age="30"
    }
</script>

<style scoped>

</style>